<template>
	<view class="content">
		<view class="form">
			<view class="titel">
				计件派工
			</view>
			<view class="itembox">
				<view class="name">
					工序名称:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.name" disabled="" placeholder="请填写工序名称" />
				</view>
			</view>
			<!-- <view class="itembox">
				<view class="name">
					工序编码:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.code" disabled="" placeholder="请填写工序编码" />
				</view>
			</view> -->
			<!-- <view class="itembox">
				<view class="name">
					产品名称:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.goodsName" disabled="" placeholder="请填写产品名称" />
				</view>
			</view>
			<view class="itembox">
				<view class="name">
					产品型号:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.goodsModel" disabled="" placeholder="请填写产品型号" />
				</view>
			</view> -->
			<view class="itembox">
				<view class="name">
					生产产品名称:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.gongxuName" disabled="" placeholder="请填写生产产品名称" />
				</view>
			</view>
			<view class="itembox">
				<view class="name">
					生产产品型号:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.gongxuModel" disabled="" placeholder="请填写生产产品型号" />
				</view>
			</view>
			<view class="itembox">
				<view class="name">
					工单待完成数量:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.remainCount" disabled="" placeholder="请填写工单待完成数量" />
				</view>
			</view>
			<view class="itembox">
				<view class="name">
					已分配数量:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.fenpeiCount" disabled="" placeholder="请填写已分配数量" />
				</view>
			</view>
			<view class="itembox">
				<view class="name" style="font-weight: bold;color: red;">
					分配数量:
				</view>
				<view class="inputBox">
					<input type="number" :max="sumRemainCountBfb" v-model="info.goodSnum" @input="onKeyInput"
						placeholder="请填写分配数量" />
				</view>
			</view>
			<view class="itembox">
				<view class="name" style="font-weight: bold;color: red;">
					派工时间:
				</view>
				<view class="inputBox">
					<uni-datetime-picker type="datetime" v-model="info.planStartTime" />
				</view>
			</view>
			<view class="itembox">
				<view class="name">
					剩余分配数量:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.remainCount" disabled="" placeholder="请填写剩余分配数量" />
				</view>
			</view>
			<view class="itembox">
				<view class="name">
					剩余完成数量:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.remainfinishCount" disabled="" placeholder="请填写剩余完成数量" />
				</view>
			</view>

			<!-- <view class="itembox">
				<view class="name">
					单价:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.money" disabled="" placeholder="请填写单价" />
				</view>
			</view>
			<view class="itembox">
				<view class="name">
					总价:
				</view>
				<view class="inputBox">
					<input type="number" v-model="info.allMoney" disabled="" placeholder="请填写总价" />
				</view>
			</view> -->
			<view class="itembox" v-if="info.remark">
				<view class="name">
					备注:
				</view>
				<view class="inputBox">
					<input type="text" v-model="info.remark" placeholder="请输入备注" />
				</view>
			</view>
			<view class="itembox" v-for="(worker, index) in selectedWorker" :key="index" @click="areasPopupBnt(index)">
				<view class="name">
					工人{{ index + 1 }}:
				</view>
				<view class="inputBox">
					<view class="" v-if="!worker.selectCheName">
						请选择工人
					</view>
					<view class="" v-if="worker.selectCheName">
						{{ worker.selectCheName }} / {{ worker.selectName }}
					</view>

					<view class="deleteBnt" v-if="index != 0" @click.stop="deleBnt(index)">
						删除
					</view>
				</view>
			</view>
			<view class="add-worker-btn" @click="addWorker">
				添加工人
			</view>
		</view>

		<view class="bottom-box">
			<view class="bnt" @click="addBnt()">
				派工
			</view>
		</view>
		<!-- 车间选择弹窗 -->
		<uni-popup ref="areasPopup" type="center">
			<view class="areasbox-box">
				<view class="areasbox">
					<picker-view :indicator-style="indicatorStyle" :value="areaValue" @change="bindChange"
						class="picker-views">
						<picker-view-column>
							<view class="items" v-for="(item, index) in dataTree" :key="index">{{ item.label }}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="items" v-for="(item, index) in nameList" :key="index">{{ item.label }}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="bom-bnt">
					<view class="cancel" @click="areasPopupClose()">
						取消
					</view>
					<view class="addbnt" @click="areasAddBnt()">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import * as index from '@/api/index.js'
export default {
	data() {
		return {
			info: {},
			workerList: [], // 工人列表
			selectedWorker: [{
				selectCheName: '',
				selectCheId: '',
				selectName: '',
				selectId: ''
			}], // 当前选中的工人
			dataTree: [],
			nameList: [],
			indicatorStyle: `height: 50px;`,
			areaValue: ['0', '0', '0', '3'],
			selectCheName: '', //选择的车间名称
			selectCheId: '', //选择的车间id
			selectName: '', // 选择的人员名称
			selectId: '', // 选择的人员id
			selectIndex: '',
			id: '',
			sumRemainCountBfb: '',//最大派工
		};
	},
	onLoad(e) {
		if (e.id) {
			this.id = e.id
			this.getList()
		}
		if (e.info) {
			this.info = JSON.parse(e.info)
		}
		this.dictType()
		this.deptTreeselect()
	},
	methods: {
		// 获取百分比
		getConfigKey() {
			index.getConfigKey({ key: 'baifenbi' }).then(res => {
				this.sumRemainCountBfb = Math.round( res.msg * this.info.remainCount)
			})
		},
		// 查询列表数据
		getList() {
			// var id = this.ids.split(",")
			// console.log(this.getDataType(this.ids))
			index.listSaleProByPhone({
				id: this.id
			}).then(res => {
				this.info = res.rows[0]
				this.info.goodSnum = this.info.remainCount
				this.info.planStartTime = Date.now() - 2*24*3600*1000
				this.getConfigKey()
			})
		},
		// 打开选择工人
		areasPopupBnt(e) {
			if (!this.selectId) {
				this.selectCheName = this.dataTree[0].label
				this.selectCheId = this.dataTree[0].id
				this.selectName = this.nameList[0].label
				this.selectId = this.nameList[0].value
			}
			this.selectIndex = e
			this.$refs.areasPopup.open()
		},
		// 关闭选择工人
		areasPopupClose() {
			this.$refs.areasPopup.close()
		},
		// 删除工人选择
		deleBnt(e) {
			this.selectedWorker.splice(e, 1)
		},
		// 确定选择弹窗
		areasAddBnt() {
			this.selectedWorker[this.selectIndex].selectCheName = this.selectCheName
			this.selectedWorker[this.selectIndex].selectCheId = this.selectCheId
			this.selectedWorker[this.selectIndex].selectName = this.selectName
			this.selectedWorker[this.selectIndex].selectId = this.selectId
			this.$refs.areasPopup.close()
		},
		deptTreeselect() {
			index.deptTreeselect({
				parentId: '57d779853f0f4d14b03d51db30099456'
			}).then(res => {
				this.dataTree = res.data
				this.deptName(this.dataTree[0].id)
			})
		},
		deptName(e) {
			index.getUserByDept({
				deptId: e,
				pageNum: 1,
				pageSize: 100
			}).then(res => {
				this.nameList = res.data.nameList
			})
		},
		bindChange: function (e) {
			console.log(e.detail.value, 'e.detail.value')
			this.selectCheName = this.dataTree[e.detail.value[0]].label
			this.selectCheId = this.dataTree[e.detail.value[0]].id
			this.selectName = this.nameList[e.detail.value[1]].label
			this.selectId = this.nameList[e.detail.value[1]].value
			this.deptName(this.dataTree[e.detail.value[0]].id)
			this.$forceUpdate()
		},
		dictType() {
			index.typesBatch({
				'sys_user': 'sys_user',
			}).then(res => {
				this.workerList = res.data.sys_user
			})
		},
		addWorker() {
			this.selectedWorker.push({
				selectCheName: '',
				selectCheId: '',
				selectName: '',
				selectId: ''
			}); // 动态添加一个空的工人选择框
		},
		jianting() {
			var pages = getCurrentPages();
			console.log(pages.length);
			var Page = pages[pages.length - 1]; //当前页
			console.log(pages[pages.length - 1].route); //输出当前路由
			var prevPage = pages[pages.length - 2];
			console.log(pages[pages.length - 2].route); //输出上一个页面的路由
			if (pages[pages.length - 2].route ==
				'pagesA/orderAdmin/productionOrder/productionDetails/allocation/index') { //确定要返回到相应页面，在触发
				prevPage.$vm.reload()
			}
		},
		onKeyInput(event) {
			this.info.count = event.target.value
			this.info.allMoney = event.target.value * this.info.money
		},
		getInfo() {
			goodsSaledoGongxuUserMoneyInfo(this.id).then(res => {
				console.log('成功了吗')
			})
		},
		addBnt(e) {
			if (Number(this.info.goodSnum) > Number(this.sumRemainCountBfb)) {
				this.$tools.toast("分配数量不能大于最大可派工数量!");
				this.info.goodSnum = this.sumRemainCountBfb
				this.$forceUpdate()
				return;
			}
			if (!this.info.goodSnum) {
				this.$tools.toast("请输入分配数量!");
				return;
			}
			if (!this.selectedWorker[0].selectCheName) {
				this.$tools.toast("请选择工人!");
				return;
			}
			uni.showModal({
				title: '提示',
				content: '确定派工吗？',
				success: (res) => {
					if (res.confirm) {
						const goodsOrderIn = Object.assign({});
						const worker = []
						this.selectedWorker.forEach(item => {
							worker.push(item.selectId)
						})
						goodsOrderIn.planStartTime = this.info.planStartTime
						goodsOrderIn.userIds = worker.join(','); // 将选中的工人ID数组转为逗号分隔的字符串
						goodsOrderIn.columnsGongxu = [];
						goodsOrderIn.columnsGongxu[0] = this.info;
						goodsOrderIn.columnsGongxu.forEach(item => {
							item.remainCount = item.goodSnum;
							item.type = '0';
						});
						index.addUserTaskPiliang(goodsOrderIn).then(res => {
							setTimeout(() => {
								uni.navigateBack(-1);
								this.jianting();
							}, 100);
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
	}

}
</script>

<style lang="scss">
.content {
	padding-left: 20rpx;
	padding-right: 20rpx;
	padding-bottom: 250rpx;

	.form {
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;

		.titel {
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			color: #333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.itembox {
			border-top: 1px solid #EDEDED;
			display: flex;
			align-items: center;
			padding-top: 30rpx;
			padding-bottom: 30rpx;

			.name {
				text-align: right;
				width: 160rpx;
				color: #999;
				font-size: 28rpx;
			}

			.inputBox {
				padding-left: 20rpx;
				width: 600rpx;
				color: #333;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.deleteBnt {
					margin-left: auto;
					padding: 4rpx 12rpx;
					height: 42rpx;
					border-radius: 10rpx;
					background: #F5F7FB;
					color: #8295BC;
					font-size: 24rpx;
				}
			}
		}
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		padding: 30rpx;
		padding-bottom: 120rpx;
		height: 120rpx;
		background: #ffffff;
		display: flex;
		justify-content: center;

		.bnt {
			color: #ffffff;
			width: 306rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			background: #4D8987;
		}
	}
}

.areasbox-box {
	background-color: #FFFFFF;
	z-index: 99;

	.areasbox {
		width: 750rpx;
		height: 600rpx;

		.picker-views {
			width: 750rpx;
			height: 600rpx;
			margin-top: 20rpx;
		}

		.items {
			margin-left: 3rpx;
			font-size: 26rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			line-height: 100rpx;
			text-align: center;
		}

	}

	.bom-bnt {
		width: 750rpx;
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #EAEAEA;

		.cancel {
			width: 50%;
			font-size: 32rpx;
			color: #333;
			text-align: center;
			line-height: 100rpx;
			border-right: 1rpx solid #EAEAEA;
		}

		.addbnt {
			width: 50%;
			text-align: center;
			line-height: 100rpx;
			color: #4D8987;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}


.add-worker-btn {
	margin-top: 20rpx;
	padding: 20rpx;
	background-color: #f0f0f0;
	border-radius: 10rpx;
	text-align: center;
	color: #333;
	font-size: 28rpx;
}
</style>